<template>
  <view class="take-bg">
    <img style="width: 70%;margin-top: 20%" src="/static/doctor.png"/>
    <div class="button-box"  @click="select">
      <img src="/static/take_icon.png" alt="">
      <button>拍照上传</button>
    </div>
    <jp-cropper-watermark watermark="" :watermarkType="1" mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>

  </view>
</template>

<script>
import { baseUrl } from '@/common/http.interceptor.js'
export default {
  data() {
    return {
      url: "",
      path: ""
    }
  },
  methods: {
    select() {
      if (!uni.getStorageSync('user_id')) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      uni.chooseImage({
        count: 1,
        success: (rst) => {
          console.log(rst)
          // 设置url的值，显示控件
          this.url = rst.tempFilePaths[0];
        }
      });
    },

    onok(ev) {
      this.url = "";
      this.path = ev.path;
      uni.uploadFile({ //上传图片
        url: baseUrl + '/api/upload/file', //开发者服务器 url
        filePath: ev.path, //要上传文件资源的路径。
        fileType: 'image', //文件类型，image/video/audio
        name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
        success: (res) => { //接口调用成功的回调函数
          console.log('uploadImage success, res is:', res)
          if (res.errMsg === 'uploadFile:ok') {
            let data = JSON.parse(res.data)
            this.$u.route({
              type: 'navigateTo',
              url: '/pages/take/detail',
              params: {
                image: data.data.url
              }
            })
          }
          uni.showToast({ //消息提示框
            title: '上传成功',
            icon: 'success',
            duration: 1000
          })
        },
        fail: (err) => { //接口调用失败的回调函数
          console.log(err)
          uni.showModal({ //消息提示框
            content: err.errMsg, //错误信息
            showCancel: false
          });
        }
      });
    },
    oncancel() {
      // url设置为空，隐藏控件
      this.url = "";
    }
  }
}
</script>
<style lang="scss">
.take-bg {
  height: 100%;
  background-color: #83bda2;
  display: flex;
  flex-direction: column;
  align-items: center;
  .panel {
    left: 0 !important;
  }
  .button-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: 360rpx;
    height: 360rpx;
    background-color: #FFFFFF;
    border-radius: 50%;
    justify-content: center;
    img {
      width: 100rpx;
      height: 80rpx;
    }
    button {
      height: 40px;
      background-color: transparent;
      border: none !important;
      border-color: transparent !important;
      border-radius: 5px;
      &::after {
        border-color: transparent;
      }
    }
  }
}
</style>
